<template>
	<view class="content">
		<image class="ad" :src="item.postersTranslateText" mode="scaleToFill"></image>
		<!-- <view class="bottom">
			<view style="display: flex;flex-direction: column;">
				<view class="">
					
					<image v-if="item.avatarTranslateText==null" style="width: 50upx;height: 50upx;" src="../../static/user/avatar.png" mode="scaleToFill"></image>
					<image v-if="item.avatarTranslateText" style="width: 50upx;height: 50upx;" :src="item.avatarTranslateText" mode="scaleToFill"></image>
					<text style="font-size: 34rpx;color: #656565;margin-top: 10upx;">{{item.nickName}}</text>
				</view>
				
				<text style="font-size: 32rpx;color: #c0c0c0;margin-top: 5upx;">邀请码 {{item.invitationCode}}</text>
				<text style="font-size: 24rpx;color: #656565;margin-top: 5upx;">长按试别二维码</text>
			</view>  
			
			<view class="qrimg-i">
				<tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="item.invitationCode" :size="size" :unit="unit" :background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true"  />
			</view>
			
			<image class="bottomImg" :src="item.postersTranslateText" mode="scaleToFill"></image> 
		</view>
	 -->
	</view>
</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	import {
	    mapState 
	} from 'vuex'; 
	 import {
	 	mapMutations
	 } from 'vuex';
	 export default {
	 	data() {
	 		return {
	 			item:{},
				ifShow: true,
				val: '二维码', // 要生成的二维码值
				size: 120, // 二维码大小
				unit: 'upx', // 单位
				background: '#ffffff', // 背景色
				foreground: '#000000', // 前景色
				pdground: '#000000', // 角标色
				icon: '/static/login/logo.png', // 二维码图标
				iconsize: 16, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '' // 二维码生成后的图片地址或base64
	 		}
	 	},
		components: {
				tkiQrcode
		},
	 	onLoad() {
	 		var me = this;
	 		
	 	},
		onShow(){
			this.checkToken();
		},
	 	computed: {
	 		...mapState(['hasLogin','userInfo'])
	 	},
	 	methods: {
	 		checkToken(){
	 			var that=this;
	 			 uni.getStorage({
	 			    key: 'token',
	 			    success: function (res) {
	 					that.getUser(res.data);
	 			    },
	 				fail:function(error){
	 					uni.navigateTo({
	 						url: `/pages/login/login`
	 					})
	 				}});
	 		},
	 		//获取用户信息
	 		getUser(token){
	 			var that=this;
	 			uni.request({
	 					url: that.serverUrl + '/core/api/v1/hy/info/posters',
	 					method: "GET",
	 					header: {
	 						'content-type': 'application/json',
	 						'Authorization': 'Bearer '+token
	 					},
	 					success: (res) => {
	 						if (res.data.code == 200) {
								that.item=res.data.data;
	 							console.log(res.data.data);
								// setTimeout(() => {
								// 	that.val=that.serverUrl +'/h5/#/?recommendUserUid='+res.data.data.userUid
								// 	that.creatQrcode()
								// }, 500);	
								//this.tkiQrcode._makeCode();
								//this.$refs.qrcode._makeCode()
	 						}
	 					},
	 					fail: (error) => {
	 						console.log(error);
	 					}
	 				})
	 			
	 		},
			creatQrcode() {
			this.$refs.qrcode._makeCode()
			}
	 		
	 	}
	 }
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		// align-items: center;
		// justify-content: center;
		background-color: #F2F2F2;
	}
	.ad {
		position:fixed;
		  top: 0;
		  left: 0;
		  width:100%;
		  height:100%;
		  // min-width: 1000px;
		  z-index:-10;
		  zoom: 1;
		  background-color: #fff;
		  background-repeat: no-repeat;
		  background-size: cover;
		  -webkit-background-size: cover;
		  -o-background-size: cover;
		  background-position: center 0;
	}
	.bottom {
		position: fixed;
		bottom: 0px;
		height: 12%;
		padding-left: 6%;
		padding-right: 6%;
		width: 88%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.bottomImg {
			height: 120upx;
			width: 120upx;
		}
	}
	
</style>
